<style type='text/css'>
	* {
		/*
		color: #CCC;
		font: 12px 'Tahoma';
		background-color: #000;
		*/
	}
	.hilight { background-color: #FFCC33; }
</style>
<title>GSMArena mobile comparator</title>
<input style='display: none;' type='text' id='text_mobile' />
<input style='display: none;' type='button' id='add_phone' value='Add Phone' onclick='add_phone();' />
<span id='status'>Building mobile list..</span>
<span id='loading'></span>
<div id='output'></div>

<!-- jquery libs -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script language="javascript">

	function remove(obj){
		var column_index = $(obj).closest('td').prevAll('td').length;
		// remove from result
		RESULTS.splice(column_index-1, 1);
		// remove column
		var cols = $('#output_table tr').eq(0).find('td').length;
		if(cols <= 2){
			$('#output').html('');
		}
		else {
			$.each($('#output_table tr'), function(){ $(this).find('td').eq(column_index).remove(); });
		}
		$('#text_mobile').focus();
	}

	function fetch_data(url){
		loading_start();

		var key = 'XXXXX';
		var result = {};
		$.ajax({
			url: url,
			error:function(a, b, c){
				alert(a.status + '\n' + c);
				$('#text_mobile').val('');
				$('#text_mobile').focus();
				loading_end();
			},
			success: function(data){

				var phone_name = $(data).find('h1').text();
				var img_src = $(data).find('div#specs-cp-pic img').attr('src');

				// control bar
				var panel = "" // "<input type='button' value='<==' />"
							+ "<input type='button' value=' X ' onclick='remove(this);' />";
							// + "<input type='button' value='==>' />";
				result['Controller'] = panel;

				// manual add
				desktop_url = url.replace(/m\./, 'www\.');
				result['Phone'] = phone_name + " [ <a href='"+ desktop_url +"' target='_blank'>Go to GSMArena</a> ]";
				result['Image'] = '<a href="'+ desktop_url +'" target="_blank"><img src="' + img_src + '" border="0" /></a>';

				// gather data
				var tds = $(data).find('#specs-list td');
				$.each(tds, function(i, d){
					var clazz = $(d).attr('class');
					var text = $(d).text();
					if(clazz == 'ttl'){
						key = text;
						// hot fix
						if(key.trim() == ''){ key = 'Battery'; }
					}
					else if(clazz == 'nfo'){
						result[key] = text;
					}
				});

				// generate table
				create_table(result);
				loading_end();
				$('#text_mobile').val('');
				$('#text_mobile').focus();
			},
		});
	}

	function create_table( result, output_id ){
		if(output_id == undefined){ output_id = 'output'; }

		RESULTS.push( result );

		// get keys
		var keys = [];
		for(k in result){ keys.push( k ); }

		var table = '';
		var gen_content = '';

		// loop by keys
		for(var i=0; i<keys.length; i++){
			var k = keys[i];
			gen_content +=  "<tr><td>" + k + "</td>";
			// loop by results
			for(var j=0; j<RESULTS.length; j++){
				var r = RESULTS[j];
				gen_content += "<td>" + r[k] + "</td>"
			}
			gen_content +=  "</tr>";
		}

		// concat table html
		table = "<table id='" + output_id + "_table' border='1'>"
					// + "<tr>"
					//	+ "<td>FIELD</td><td>PHONE I</td>"
						+ gen_content
					// + "</tr>"
				+ "</table>";

		// render to screen
		$('#'+output_id).html(table);
		$('#'+output_id+' tr').hover(
			function(){ $(this).addClass('hilight'); },
			function(){ $(this).removeClass('hilight'); }
		);
	}

	function loading_start(){
		$('#loading').html("<img src='ajax-loader.gif' />");
	}
	function loading_end(){
		$('#loading').html("");
	}

	function initial(){
		loading_start();

		var source = "http://www.gsmarena.com/quicksearch-4388.jpg"; // mobile list
		$.ajax({
			url: source,
			success: function(data, textStatus, jqXHR){
				var brands = data[0];
				var models = data[1];
				for(var i=0; i<models.length; i++){
					var m = models[i];
					var m_brand	= brands[m[0]];
					var m_id	= m[1];
					var m_name	= m[2];
					var m_name2	= m[3];
					var m_img	= m[4];
					var key = m_brand + ' ' + m_name;
					var page_name = (m_brand + '_' + m_name.replace(/ /g, '_') + '-' + m_id).toLowerCase();
					var value = 'http://m.gsmarena.com/' + page_name + '.php';
					MOBILES_DATA[key] = value;
				}

				// make autocomplete
				keys = [];
				for(var k in MOBILES_DATA) {
					if (MOBILES_DATA.hasOwnProperty(k)) {
						keys.push(k);
					}
				}
				keys.sort();
				$('#text_mobile').autocomplete({ source: keys });

				// after loaded
				loading_end();
				$('#status').css('display', 'none');
				$('#text_mobile').css('display', 'inline');
				$('#text_mobile').focus();
				$('#add_phone').css('display', 'inline');
			}
		});
	}

	function add_phone(){
		var url = MOBILES_DATA[$('#text_mobile').val()];
		fetch_data(url);
	}

	// -----------------------------------------------------------------

	// GLOBAL VAR
	var RESULTS = []; // link with create_table function
	var MOBILES_DATA = {};
	initial();

</script>
